<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8">
    <title>Knogen.cn</title>
    <link rel="stylesheet" href="/static/css/w3.css">
    <link rel="stylesheet" href="/static/css/tables.css">

    <!--<link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">-->
</head>

<body>
<header class="w3-container w3-light-grey"><h3 class="w3-xlarge">Knogen.cn</h3>
</header>
<div class="top w3-center"><h2>{{cityName}}</h2></div>
<section class="w3-container container">
    <div class="w3-row-padding"><ul class="w3-pagination">
      {% for i in pages%}
        <li><a {% if page == i %}class="w3-green"{% endif %} href="/tables?province={{province}}&cityName={{cityName}}&page={{i}}">{{i}}</a></li>
      {% endfor %}
    </ul></div>
    <div class="w3-row-padding">
      {% for table in data %}
        <article class=" w3-light-grey w3-hover-green w3-card-2 w3-border w3-padding"><a href ="/table?id={{table.id}}&cityName={{cityName}}">{{table.表名}}</a></article>
      {% endfor %}
        <!-- <article class=" w3-hover-green w3-card-2 w3-border w3-padding">page2</article>
        <article class=" w3-light-grey w3-hover-green w3-card-2 w3-border w3-padding">page3</article> -->
    </div>
    <div class="w3-row-padding"><ul class="w3-pagination">
      {% for i in pages%}
        <li><a {% if page == i %}class="w3-green"{% endif %} href="/tables?province={{province}}&cityName={{cityName}}&page={{i}}">{{i}}</a></li>
      {% endfor %}
    </ul></div>
</section>

<footer class="w3-container">
    <!-- <p>2016</p> -->
</footer>
<script src="//cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script src="/static/js/table.js"></script>
</body>

</html>
